<!--
 * @Author: daidai
 * @Date: 2022-03-01 15:27:58
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:24:14
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-center.vue
-->
<template>
  <div v-if="pageflag" class="right_center_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !sbtxSwiperFlag }">
    <component :is="components" :data="list" :class-option="defaultOption">
      <ul class="right_center ">
        <li class="right_center_item" v-for="(item, i) in list" :key="i">
          <span class="orderNum">{{ i + 1 }}</span>
          <div class="inner_right">
            <div class="dibu"></div>
            <div class="flex">
              <div class="info">
                <span class="labels ">片区/乡镇: </span>
                <span class="contents zhuyao" style="color:orange;"> {{ item.area }}</span>
              </div>
              <div class="info">
                <span class="labels">客户总数：</span>
                <span class="contents zhuyao" style="color:orange;"> {{ item.amount }}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </component>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height:200px" />
</template>

<script>
import { currentGET } from 'api/modules'
import vueSeamlessScroll from 'vue-seamless-scroll'  // vue2引入方式
import Kong from '../../components/kong.vue'
import axios from 'axios';
export default {
  components: { vueSeamlessScroll, Kong },
  props: ['parentData','customerInfo'],
  data() {
    return {
      singleInfo: {},
      activeName: 'first',
      cusname: "客户详情",
      list: [],
      pageflag: true,
      // hostIP: "localhost",
      hostIP: "116.54.4.93",
      defaultOption: {
        ...this.$store.state.setting.defaultOption,
        limitMoveNum: 1, 
        singleHeight: 30, 
        step:0,
      }

    };
  },
  computed: {
    sbtxSwiperFlag() {
      let ssyjSwiper = this.$store.state.setting.ssyjSwiper;
      if (ssyjSwiper) {
        this.components = vueSeamlessScroll
      } else {
        this.components = Kong
      }
      return ssyjSwiper
    }
  },
  created() {
    this.getData()
  },
  watch: {
    parentData(newVal) {
      console.log('片区客户数据-子组件的数据已更新:', newVal);
      this.getData();
    },
    customerInfo(newVal){
      console.log('片区客户数据-客户名称:', newVal);
      this.showCusInfo();
    },
  },
  mounted() { },
  methods: {
    showCusInfo(){
      let surl = "http://"+this.hostIP+":9500/api/bigscreen/getSinCusInfo?area="+this.parentData+"&name="+this.customerInfo;
      axios.get(surl,{ withCredentials: true }) // 使用 params 参数传递查询参数
        .then(res => {
          console.log("-------------res----------",res.data)
          this.singleInfo = res.data[0];
          this.activeName = "second";
          this.cusname = this.customerInfo;
        });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getData() {
      console.log("--------片区客户数据-------",this.parentData)
      console.log("--------片区客户数据-------",this.customerInfo)
      this.pageflag = true
      let area = "";
      if(this.parentData=="云南上云丰花卉有限公司"||this.parentData=="电商"||this.parentData=="洋丽人"||this.parentData=="何文丽"||this.parentData=="销售部"){
        area = "云南上云丰花卉有限公司";
      }else {
        area = this.parentData;
      }
      let surl = "http://"+this.hostIP+":9500/api/bigscreen/getAreaCustomerData?area="+area;
      axios.get(surl,{ withCredentials: true }) // 使用 params 参数传递查询参数
        .then(res => {
          if (res.code===200) {
            this.list = res.data;
            if(this.list.length>this.defaultOption.limitMoveNum){
              this.components = vueSeamlessScroll
            }else{
              this.components = Kong
            }
            let timer = setTimeout(() => {
              clearTimeout(timer)
              this.defaultOption.step = this.$store.state.setting.defaultOption.step
            }, this.$store.state.setting.defaultOption.waitTime);
          } else {
            this.pageflag = false
            this.$Message.warning(res.msg)
          }
      });
    },

  },
};
</script>
<style lang='scss' scoped>
/* 修改所有标签的字体颜色 */
::v-deep .el-tabs__item {
  color: white; /* 默认字体颜色 */
}

/* 修改被激活的标签的字体颜色 */
::v-deep .el-tabs__item.is-active {
  color: aqua; /* 激活状态的字体颜色 */
}

/* 修改激活状态的标签的分割线颜色 */
::v-deep .el-tabs__item.is-active {
  border-bottom-color: #13ce66; /* 激活状态的标签底部颜色为绿色 */
}

::v-deep .el-tabs__active-bar {
	background-color:aqua;
}
.right_center {
  width: 100%;
  height: 100%;

  .right_center_item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 10px;
    font-size: 14px;
    color: #fff;

    .orderNum {
      margin: 0 20px 0 -20px;
    }


    .inner_right {
      position: relative;
      height: 100%;
      width: 400px;
      flex-shrink: 0;
      line-height: 1.5;

      .dibu {
        position: absolute;
        height: 2px;
        width: 104%;
        background-image: url("../../assets/img/zuo_xuxian.png");
        bottom: -12px;
        left: -2%;
        background-size: cover;
      }
    }

    .info {
      margin-right: 10px;
      display: flex;
      align-items: center;

      .labels {
        flex-shrink: 0;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }

      .zhuyao {
        color: $primary-color;
        font-size: 15px;
      }

      .ciyao {
        color: rgba(255, 255, 255, 0.8);
      }

      .warning {
        color: #E6A23C;
        font-size: 15px;
      }
    }

  }
}

.right_center_wrap {
  overflow: hidden;
  width: 100%;
  height: 250px;
}

.overflow-y-auto {
  overflow-y: auto;
}
</style>